<template>
  <div class="page-form-wrap">
    <el-form v-loading="loadingBtn.diaSubmitBtn" :model="addForm" ref="addForm" :rules="addFormRule"
             :label-width="formLabelWidth">
      <el-form-item label="角色名" prop="appellation">
        <el-input v-model="addForm.appellation"></el-input>
      </el-form-item>
      <el-form-item label="角色标识" prop="num">
        <el-input v-model="addForm.num"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="desc">
        <el-input v-model="addForm.desc"></el-input>
      </el-form-item>
      <el-form-item class="system-form-btnGroup">
      </el-form-item>
    </el-form>
    <div class="save-wrap">
      <el-button icon="el-icon-position" :loading="loadingBtn.diaSubmitBtn" type="primary"
                 @click="submitForm('addForm')">提交
      </el-button>
      <el-button icon="el-icon-refresh-left" @click="resetForm('addForm')">重置</el-button>
    </div>
  </div>
</template>

<script>
import { insert, selectOne, update } from '@/api/system/role'
import { validUppercaseLetter } from '@/common/validate/formValidate'

export default {
  name: 'roleManagementAdd',
  data () {
    return {
      loadingBtn: {
        diaSubmitBtn: false
      },
      addForm: {
        appellation: '',
        desc: '',
        num: ''
      },
      addFormRule: {
        appellation: [
          { required: true, message: '请填写角色名', trigger: 'blur' },
          { max: 20, message: '角色名不能超过20个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请填写角色标识', trigger: 'blur' },
          { max: 10, message: '角色标识不能超过10个字符', trigger: 'blur' },
          { validator: validUppercaseLetter, trigger: 'blur' }
        ]
      },
      // 表单标签宽度
      formLabelWidth: '100px'
    }
  },
  methods: {
    /**
     * 提交按钮
     * @param formName
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingBtn.diaSubmitBtn = true
          if (this.isEdit) {
            update(this.addForm).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          } else {
            insert(this.addForm).then(({ code, msg }) => {
              if (code === this.$constant.SUCCESS) {
                this.$message.success(msg)
                this.$refs[formName].resetFields()
              }
              this.loadingBtn.diaSubmitBtn = false
            })
          }
        } else {
          return false
        }
      })
    },
    getUserInfo (id) {
      selectOne(id).then(({ data, code }) => {
        if (code === this.$constant.SUCCESS) {
          this.addForm = { ...this.addForm, ...data }
        }
      })
    },
    /**
     * 重置按钮
     * @param formName
     */
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  created () {
    const isEdit = this.$route.query.pageFlag === 'edit'
    if (isEdit) {
      this.isEdit = isEdit
      this.getUserInfo(this.$route.query.id)
    }
  }
}
</script>

<style scoped>
</style>
